<!--
 * @Author: tkp
 * @Date: 2022-03-30 09:51:53
-->
<template>
  <div class="input_class">
    <el-input :value="value" @input="inputHandle" @change="changeHandle" :suffix-icon="suffixIcon" :prefix-icon="prefixIcon" :type="type" :disabled="disabled" clearable :size="size" :placeholder="placeholder" :maxlength="maxlength" :show-word-limit="show_word_limit" :autosize="autosize"></el-input>
    <div class="input_text">{{appendTitle}}</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: {
    value: {
      type: String | Number,
      default: ''
    },
    appendTitle: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium'
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number | false,
      default: false
    },
    show_word_limit: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    suffixIcon: {
      type: String,
      default: ''
    },
    autosize: {
      type: Boolean | Object,
      default: false
    },
  },

  methods: {
    inputHandle(e) {
      this.$emit('input', e)
    },
    changeHandle(e) {
      this.$emit('change', e)
    }
  }
}
</script>

<style lang='scss' scoped>
.input_class {
  display: flex;
  flex-direction: row;
  align-items: center;
  .input_text {
    padding-left: 10px;
    font-size: 16px;
  }
}
</style>